<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	#body{
	  width: 200px;
	  height: 210px;
	  position: relative;
	  margin-top: 200px;
	  margin-left: auto;
	  margin-right: auto;
	}
	#face{
      width: 160px;
	  height: 160px;
	  background: rgb(254,236,136);
	  position: absolute;
	  top:50px;
	  left:20px;
	  border-radius: 50%;
	  transition: all 0.8s linear; 
	}
	#left_eyebrow,#right_eyebrow{
	  width:60px;
	  height: 60px;
	  background: white;
      border-radius: 50%;
	  position: absolute;
	  top:40px;
	  z-index: 1;
	}
	#left_eyebrow{
	  left:12px;
	}
	#right_eyebrow{
	  right:12px;
	}
	#Mask{
	  width: 60px;
	  height:60px;
	  background: rgb(254,236,136);
	  border-radius: 50%;
	  position: absolute;
	  top:7px;
	}
	#left_eye,#right_eye{
	  width: 12px;
	  height: 12px;
	  background: black;
      position: absolute;
	  border-radius:50%;
	  top:12px;
	  left:3px; 
	}
	#left_nose,#right_nose{
	  width:5px;
	  height:5px;
	  background: black;
	  border-radius:50%;
	  position: absolute;
	  top:85px;
	  z-index: 1;
	}
	#left_nose{
	  left:85px;
	}
	#right_nose{
	  right:85px;
	}
	#mouth{
	  width: 120px;
	  height:120px;
	  background: black;
	  border-radius: 50%;
	  position: absolute;
	  top:20px;
	  left:20px;
	}
	#mouth_Mask{
	  width: 122px;
	  height:122px;
	  background: rgb(254,236,136);
	  border-radius: 50%;
	  position: absolute;
	  left:-1px;
	  top:-6px; 
	}
	#egg_top,#egg_bottom{
	  width:200px;
	  height: 105px;
	  position: absolute;
	  border-left: solid 1px black;
	  border-right: solid 1px black;
	  background: rgb(232,197,83);
	  transition: all 0.9s linear; 
	  z-index: 2;
	}
	#egg_top{
	  border-top:solid 1.5px black ;
	  border-radius: 100px 100px 0px 0px; 
	}
	#egg_bottom{
	  top:105px;
	  border-bottom: solid 1.5px black;
	  border-radius: 0px 0px 100px 100px; 
	}
	#body:hover #egg_bottom{
	  border-top: solid 1px black;
	}
	#body:hover #egg_top{
	  margin-top: -140px;
	  margin-left: 90px;
	  border-bottom: solid 1px black;
	  transform: rotate(60deg);
	  transition: all 0.8s linear; 
	}
	#body:hover #face{
	  margin-top: -100px;
	  transition: all 1s linear; 
	  animation:show 0.5s linear infinite alternate;
	}
	@keyframes show{
	  from{
		transform: rotate(20deg);
	  }
	  to{
		transform: rotate(-20deg);
	  }
	}
	#left_shadow,#right_shadow{
	  width:125px;
      height:30px;
	  background: rgb(39,40,34);
	  border-radius:50%;
	  position:absolute;
	  top:195px;
	  left:110px;
	  transition: all 0.9s linear; 
	}
	#body:hover #right_shadow{
	  left:215px;
	  transition: all 0.8s linear; 
	}
</style>
 </head>
 <body>
  <div id="body">
	<div id="face">
	    <div id="left_eyebrow"> 
			<div id="Mask"></div>
			<div id="left_eye"></div>
		</div>
		<div id="right_eyebrow"> 
			<div id="Mask"></div>
			<div id="right_eye"></div>
		</div>
		<div id="left_nose"></div> 
		<div id="right_nose"></div>
		<div id="mouth">
			<div id="mouth_Mask"></div>
		</div>
	</div>
		<div id="egg_top"></div>
		<div id="egg_bottom"></div>
		<div id="left_shadow"></div>
		<div id="right_shadow"></div>
  </div> 
 </body>
</html>
